![[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する](https://devio2023-media.developers.io/wp-content/uploads/2020/09/typescript.png)
[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する
- t_o_dと申します。
- map関数で生成された配列等、配列内にundefinedが入るケースがあります。
- その際にfilterで取り除くのですが、単純な条件だと型情報にはundefinedが残ったままです。
- そこで今回は型もundefinedを取り除いた情報になるようにfilterする方法を記録いたします。
環境
- mac OS Ventura 13.2.1
- typescript 4.9.5
修正前
- 修正前のコードは以下の通りです。
// 型 : ((string | number)[] | undefined)[] const members = [ [1, "takahashi"], [2, "kato"], undefined, [4, "saito"] ] // 型は「((string | number)[] | undefined)[]」のまま const selections = members.filter(member => member !== undefined); // 出力 : [[1, "takahashi"], [2, "kato"], [4, "saito"]] console.log(selections)
- 上記のようにundefinedを取り除くだけならfilterに条件を書くだけで可能ですが、型の情報にはundefinedが残ったままです。
修正後
- 修正後のコードは以下の通りです。
// 型 : ((string | number)[] | undefined)[] const members = [ [1, "takahashi"], [2, "kato"], undefined, [4, "saito"] ] // 型 : (string | number)[][] const selections = members.filter((member): member is NonNullable<typeof member> => member !== undefined); // 出力 : [[1, "takahashi"], [2, "kato"], [4, "saito"]] console.log(selections)
- 修正内容として、filter関数内でユーティリティ型のNonNullableを利用しています。
NonNullable<任意の型>
のように指定することで、nullとundefinedを除いた型を新たに構築することができます。- その構築された型情報をis演算子で値に割り当てることで、型もundefinedを取り除いた情報として定義されます。
- 以上です。
参考
アノテーション株式会社について
アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。